<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>好友列表</title>
    <link rel="stylesheet" href="{{asset('src/layui/css/layui.css')}}">
    <link rel="stylesheet" href="{{asset('src/css/user_list.css')}}">
    <link rel="stylesheet" href="{{asset('src/css/common.css')}}">
</head>
<body>
<div class="list_main">
    <div class="search_box">
        <div class="more_box">
            <a href="javascript:;" class="more_box_a" >
                <img src="{{asset('src/images/system/gengduo.png')}}" alt="" onclick="showMoreList()">
{{--                <i class="layui-icon layui-icon-spread-left more" onclick="showMoreList()"></i>--}}
            </a>
            <div class="more_list" style="display: none">
                <a href="{{route('user.addchatGroupForm',['user_id'=>$user_id])}}">创建群组</a>
            </div>
        </div>

        <form action="{{route('user.list')}}" method="get">
            <input type="hidden" name="type" id="type_input" value="{{$type}}">
            <input type="hidden" name="user_id" value="{{$user_id}}">
            <div class="input_box">
                <input type="text" name="keyword" value="{{$keyword ?? ''}}">
                <button type="submit">搜索</button>
            </div>

        </form>
    </div>
    <div class="top">
        <a href="{{route('user.list',['user_id'=>$user_id,'keyword'=>$keyword,'type'=>'group'])}}" class="top_a @if($type == 'group') select_a @endif" value="group">群组</a>
        <a href="javascript:;" class="top_a" value="user" onclick="cutTopA(this,'user',1)">消息</a>
{{--        <a href="javascript:;" class="top_a @if($type == 'user') select_a @endif" value="user"  onclick="cutTopA(this,'user')">用户</a>--}}
{{--        <a href="javascript:;" class="top_a @if($type == 'group') select_a @endif" value="group"  onclick="cutTopA(this,'group')">群组</a>--}}
        <a href="{{route('user.list',['user_id'=>$user_id,'keyword'=>$keyword,'type'=>'user'])}}" class="top_a @if($type == 'user') select_a @endif" value="user">用户</a>
    </div>

    <div class="friend_box" id="friend_list">
        <ul class="list_box">
            @foreach($data as $v)
                <li>
                    <a
                        @if($type == 'user')
                        href="{{route('chat.index',['user_id'=>$user_id,'friend_id'=>$v['id']])}}"
                        @else
                        href="{{route('chat.groupIndex',['user_id'=>$user_id,'group_id'=>$v['id']])}}"
                        @endif
                    >


                        <div class="pid_box">
                            {{--                        未读消息数量--}}
                            <span class="unread_num" @if(!$v['unread_num']) style="display: none;" @endif>
                                @if($v['unread_num'] > 99)
                                    99+
                                    @else
                                    {{$v['unread_num']}}
                                @endif
                            </span>
                            {{--                        头像--}}
                            <img src="{{env('OBSURL') . $v['avatar']}}" alt="">
                        </div>

                        <div>
                            <p style="font-size:14px;">{{$v['nickname']}}</p>
                            @if($v['record'] && $v['record']['content']['type'] == 'text')
                                <span style="font-size:12px;">{{$v['record']['binding_record']['user']['nickname']}} : {{$v['record']['content']['content']}}</span>
                            @endif
                            <!--<-->
                        </div>
                        @if($v['record'] && $v['record']['content']['type'] == 'text')
                            <span style="font-size:12px;color:gray;min-width:100px;">{{$v['created_at']}}</span>
                        @else
                            <span style="font-size:12px;color:gray;min-width:100px;"></span>
                        @endif
                    </a>
                </li>
            @endforeach
        </ul>
        <div class="page_box">
            @if($data->currentPage() > 1)
                <a href="{{$data->appends(['user_id' => $user_id,'type'=>$type])->previousPageUrl()}}">上一页</a>
            @endif

            @if($data->currentPage() > 1 && $data->nextPageUrl())
                <i>/</i>
            @endif

            @if($data->nextPageUrl())
                <a href="{{$data->appends(['user_id' => $user_id,'type'=>$type])->nextPageUrl()}}">下一页</a>
            @endif
        </div>
    </div>


{{--    消息列表--}}
    <ul class="friend_box list_box msg_list" id="msg_list" style="display: none;">

    </ul>
</div>


<script src="{{asset('src/js/jquery.js')}}"></script>
<script src="{{asset('src/layui/layui.js')}}"></script>
<script>
    //显示创建群组
    function showMoreList(){
        $('.more_list').toggle()
    }

    //接收用户未读消息
    function getChatRecordsList(){
        $.ajax({
            url: "{{route('user.getChatRecordsList')}}", // 请求的 URL
            type: 'get', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'bind_id': bind_id,//当前登录的用户id
            },
            dataType: 'json', // 响应数据类型
            async:false,
            success: function (res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg(res.msg);
                }
                if (res.data){
                    $.each(res.data, function(k, v) {
                        getMsg(v.friend_id)
                    });
                }
            },
        });
    }

    // 切换列表
    function cutTopA(element,type,is_show=0){
        $('.top_a').removeClass('select_a');
        $(element).addClass('select_a');
        $('#type_input').val(type);

        $('.friend_box').hide()

        if (is_show){
            $('#msg_list').show()
        }else{
            $('#msg_list').hide()
            $('#friend_list').show()
        }
    }





    //im聊天js
    layui.use(function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: "{{route('common.uploadFileObs')}}", // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            data: {'_token': '{{csrf_token()}}', 'dir': 'chat_records/content'},
            size: 4100,//最大允许上传的文件大小(单位KB)
            done: function (res) {
                console.log(res);
                // 若上传失败
                if (res.code != 200) {
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                sendImages(res.data.ol_url, res.data.url)//发送图片
            },
        });
    });

    scrollHeight();

    //将滚动条移动到底部
    function scrollHeight() {
        var element = $(".chat_window");
        element.scrollTop(element.prop("scrollHeight"));
    }

    //获取当前时间
    function getTime() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var time = hours + ':' + (minutes < 10 ? '0' + minutes : minutes);
        return time;
    }

    /**
     * 与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
     * 其中端口为Gateway端口，即start_gateway.php指定的端口。
     * start_gateway.php 中需要指定websocket协议，像这样
     * $gateway = new Gateway(websocket://0.0.0.0:8282
     */

    var bind_id;//发件人id(binding_records表id)
    var addressee_id;//收件人id(binding_records表id)


    /**
     * 第一步：与socket建立链接
     * 打开一个 web socket (以下链接方式任选一种即可)
     * 参数解释：var ws = new WebSocket("参数A://参数B:参数C");
     * 参数A：固定写法
     ws：表示http连接
     wss:表示https连接,有https证书的时候使用
     * 参数B：要连接的地址。
     可选参数：127.0.0.1 表示：本地地址
     可选参数：48.662.156.869 表示：你的云服务器的公网ip  （48.662.156.869这个ip是我假设的云服务器公网ip）
     可选参数：im_dev.liutong.pro 表示：这个你的http域名 如（http://im_dev.liutong.pro）
     可选参数：im.liutong.pro 表示：这个是你的https网址域名 如（https://im.liutong.pro）
     * 参数C：端口号
     端口号是可以自定义的（注意取值范围）。记得在服务器->实例安全组中进行放行。
     端口号取值范围：端口不能大于65535，请确认端口没有被其它程序占用，否则启动会报错。如果端口小于1024，需要root权限运行GatewayWorker才能有权限监听，否则报错没有权限。(详情参见手册->《Gateway类的使用》->"初始化"->"ip")
     注意：这里的端口号必须和你在 "项目名\GatewayWorker\Applications\YourApp\start_gateway.php" 中$gateway = new Gateway("websocket://0.0.0.0:8282");这段代码的端口号保持一致。
     */
        // var ws = new WebSocket("ws://127.0.0.1:8282");//进行webSocket的几种方式（方式A：常规操作）
        // var ws = new WebSocket("ws://47.104.249.193:8282");//进行webSocket的几种方式（方式B：使用本机公网ip进行连接）
        // var ws = new WebSocket("ws://jim.liutong.pro:8282");//进行webSocket的几种方式（方式C:使用http://jim.liutong.pro的方式进行连接）
    var ws = new WebSocket("{{config('gateway_worker.ws_url')}}");//进行webSocket的几种方式（方式C:使用http://jim.liutong.pro的方式进行连接）
    // 服务端主动推送消息时会触发这里的onmessage

    //检测websocket是否链接
    ws.onopen = function () {
        console.log("连接成功");
    };

    // 关闭 websocket
    ws.onclose = function () {
        console.log("连接已关闭...");
    };

    ws.onmessage = function (e) {
        // json数据转换成js对象
        var data = eval("(" + e.data + ")");
        var type = data.type || '';
        var html = ""
        console.log('data=', data, 'type=', type);
        // console.log(type,222);
        // console.log(data.addressee_id == bind_id,333);
        switch (type) {
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'init':
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                binding(data.client_id)
                break;
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'text':
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                if (data.addressee_id == bind_id){
                    friend_id = data.user_id;
                    getMsg(friend_id)
                }
                break;
            case 'images':
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                if (data.addressee_id == bind_id){
                    friend_id = data.user_id;
                    getMsg(friend_id)
                }
                break;

            default :
                //如果报400状态 token异常就刷新页面
                if (data.status == 400) {
                    setTimeout(function () {
                        // 这里是需要暂停1.5秒后执行的代码
                        window.location.reload()
                    }, 1500);
                    // layer.msg('连接失败,请刷新页面后再试')
                }
        }
    };

    /**
     * 初始化绑定用户
     * @param string client_id gatwaywork给的用户id
     */
    function binding(client_id) {
        $.ajax({
            url: "{{route('chat.binding')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'client_id': client_id,//wensocket临时id标识
                'user_id': "{{$user_id}}",//当前登录的用户id
                'role':'2',//客户
            },
            dataType: 'json', // 响应数据类型
            success: function (res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg(res.msg);
                }
                bind_id = res.data.bind_id//当前登录用户id
                getChatRecordsList()
            },
            error: function (xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });
    }

    //获取消息
    function getMsg(friend_id){


        //来了消息就新建人员对话框
        //拼接id是否存在
        var element = $('#msg_li_' + friend_id);
        if (element.length > 0) {
            // 元素存在
            $('#msg_li_span_' + friend_id).text('');
        } else {
            var user = getUser(friend_id)

            var url = "{{route('chat.index')}}" + "?user_id=" + "{{$user_id}}" + '&friend_id=' + friend_id
            var img = "{{env('OBSURL')}}" + user.avatar
            // 元素不存在
            var html = `
                <li id="msg_li_${friend_id}">
                    <a href="${url}">
                        <div class="pid_box">
                            <img src="${img}" alt="">
                        </div>
                        <div>
                            <p style="font-size:14px;">${user.nickname}</p>
                            <span id="msg_li_span_${friend_id}"></span>
                        </div>
                        <span style="min-width:100px;"></span>

                    </a>
                </li>
            `


            // 将新的 li 元素的 HTML 字符串追加到 #msg_list 元素中
            $('#msg_list').append(html)
        }
    }

    //获取用户信息
    function getUser(user_id){
        var data = {}
        $.ajax({
            url: "{{route('user.getUser')}}", // 请求的 URL
            type: 'get', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'user_id': user_id,//当前登录的用户id
            },
            dataType: 'json', // 响应数据类型
            async:false,
            success: function (res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg(res.msg);
                }
                data = res.user
            },
        });
        console.log(data)
        return data
    }

    //

</script>


{{--公共报错提示--}}
<script type="text/javascript">
    layui.use(['layer'], function () {
        // 操作对象
        var layer = layui.layer;
        @include('web.layout.msg')//admin-公共成功提示组件
        @include('web.layout.error')//admin-公共错误提示组件

    });
</script>

</body>


</html>
